<script setup>
import { useCategoryStore } from '../../stores/categroy.js';
const categoryStore = useCategoryStore();
</script>

<template>
  <el-scrollbar height="200px">
    <!-- <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p> -->
    <li
      class="scrollbar-demo-item"
      v-for="item in categoryStore.categoryList"
      :key="item.id"
    >
      <RouterLink to="/">{{ item.name }}</RouterLink>
    </li>
    <!-- <li
      class="scrollbar-demo-item"
      v-for="item in categoryStore.categoryList"
      :key="item.id"
    >
      <RouterLink to="/">{{ item.name }}</RouterLink>
    </li> -->
  </el-scrollbar>
</template>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
